<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-vue的表单数据获取.html</title>
    <script src="js/vue.js"></script>
    <style>
        #form-div {
            width: 500px;
            background-color: lightcyan;
            margin: 150px auto;
            padding: 30px;
        }

        #form-div .ele {
            width: 300px;
            margin: 20px auto 0;
            text-align: center;
        }
    </style>
</head>
<body>
<!--
      Vue  MVVM 框架

-->
<div id="app">
    <div id="form-div">
        <div class="ele">
            <label>用户名称</label>
            <input type="text" name="uname" id="uname" v-model="user.username">
        </div>
        <div class="ele">
            <label>用户密码</label>
            <input type="text" name="pwd" id="pwd" v-model="user.password">
        </div>
        <div class="ele">
            <input type="button" value="登录" @click="login()">
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            user:{
                username:"",
                password:""
            }
        },
        methods:{
            login(){
                console.log(this.user)
                console.log(JSON.stringify(this.user))
            }
        }
    })
</script>

</body>
</html>